<template>
    <div id="app">
        <HeaderTop/>
        <div class="container">
            <div class="row">
                <div class="col xs-2">
                    <NavLeft :nav-list="navList"/>
                </div>
                <div class="col xs-10">
                    <router-view/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import HeaderTop from '@/components/HeaderTop'
    import NavLeft from '@/components/NavLeft'

    export default {
        name: 'App',
        components: {
            HeaderTop,
            NavLeft
        },
        data() {
            return {
                navList: [
                    {name: 'Our story', link: '#', children: []},
                    {name: 'Architecture', link: '#', children: []},
                    {name: 'Press', link: '#', children: []},
                    {name: 'Partner', link: '#', children: []},
                    {name: 'Contact', link: '#', children: [
                        {name: 'Events', link: '#'},
                        {name: 'Business', link: '#'},
                        {name: 'Media contact', link: '#'}
                    ]}
                ]
            }
        }
    }
</script>

<style lang="scss">
    @import '../../assets/css/common';
    #app {
        font-family: PingFangSC,12px/1.5 Microsoft YaHei,tahoma,arial,Hiragino Sans GB,\\5b8b\4f53,sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }
</style>
